<template>
  <div class="app-container">
    <div class="content">
      <div class="_list">
        <el-table highlight-current-row @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="版本号" width="100">
            <template slot-scope="scope">
              {{scope.row.versionNo}}
            </template>
          </el-table-column>
          <el-table-column label="系统类型" width="120">
            <template slot-scope="scope">
              {{scope.row.appType}}
            </template>
          </el-table-column>
          <el-table-column label="强制更新" width="100">
            <template slot-scope="scope">
              {{scope.row.isForce ? '是' : '否'}}
            </template>
          </el-table-column>
          <el-table-column label="更新内容">
            <template slot-scope="scope">
              {{scope.row.versionContent}}
            </template>
          </el-table-column>
          <el-table-column label="添加时间" width="150">
            <template slot-scope="scope">
              {{(scope.row.modifyTime || scope.row.createTime) | formatDate}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="changeState(scope.row.id, scope.row.status)">{{scope.row.status ? '关闭' : '开启'}}</el-button>
              <el-button type="text" @click="arrDelete('1', scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <div class="left">
          <el-tooltip class='item' effect='dark' content='批量删除' placement='top'>
            <el-button size="small" type="danger" @click="arrDelete('2')" :disabled="multipleSelection.length === 0">批量删除</el-button>
          </el-tooltip>
        </div>
        <div class="right" v-if="total>0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="添加版本" width="600px" :visible.sync="isShow">
      <el-form :model="versionForm" :rules="rules" ref="versionForm" class="add-version" label-width="80px" label-position="top" inline>
        <el-form-item label="版本号" prop="versionNo">
          <el-input placeholder="请输入版本号" v-model="versionForm.versionNo "></el-input>
        </el-form-item>
        <el-form-item label="升级编号" prop="upgradNumber">
          <el-input placeholder="请输入升级编号" v-model="versionForm.upgradNumber "></el-input>
        </el-form-item>
        <el-form-item label="强制升级" prop="isForce">
          <el-radio-group v-model="versionForm.isForce" size="mini">
            <el-radio border :label="1">是</el-radio>
            <el-radio border :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="系统类型" prop="title">
          <el-radio-group v-model="versionForm.appType" size="mini">
            <el-radio border v-for="item in edit_type_all" :key="item.value" :disabled="item.disabled" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="包上传" prop="versionUrl">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadSuccess" :before-remove="beforeRemove" :on-exceed="handleExceed" :file-list="fileList" :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="更新内容" prop="versionContent">
          <el-input v-model="versionForm.versionContent" placeholder="请输入更新内容" show-word-limit maxlength="200" type="textarea" rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="addVersion" v-loading="lock">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinsTable from '@/util/mixins.table';

export default {
  name: 'AppVersion',
  mixins: [mixinsTable],
  data () {
    return {
      lock: false,
      listLoading: false,
      APISERVER: 'getVersionList',
      DELETEAPI: 'versionDelete',
      versionForm: {
        isForce: 1,
        versionNo: '',
        upgradNumber: '',
        versionContent: '',
        appType: 'Android',
        versionUrl: ''
      },
      rules: {
        versionNo: [
          { required: true, message: '版本号必填!' },
        ],
        upgradNumber: [
          { required: true, message: '版本编号必填!' },
        ],
        versionContent: [
          { required: true, message: '更新内容必填!' },
        ],
      },
      fileList: [],
      edit_type_all: [{
        value: 'Android',
        label: 'Android'
      }, {
        value: 'IOS',
        label: 'IOS'
      }]
    };
  },
  props: {
    value: {
      type: Boolean
    }
  },
  computed: {
    isShow: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  created () {
    this.getList();
  },
  methods: {
    changeState (id, state) {
      const vm = this;
      this.$confirm(`确认${state ? '关闭' : '开启'}本条记录吗？`, '提示', {
        type: 'warning',
        async beforeClose (action, instance, done) {
          if (action === 'confirm') {
            const { code, message } = await vm.$API.versionEnable(id, {
              status: state ? 0 : 1,
            });

            if (code === 200) {
              done();
              vm.getList();
              vm.$message.success(`${state ? '关闭' : '开启'}成功!`);
            } else {
              vm.$message.error(message);
            }
          } else {
            done(false);
          }
        }
      });
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file) {
      const vm = this;

      return this.$confirm(`确定移除 ${file.name}？`, '', {
        beforeClose (action, instance, done) {
          if (action === 'confirm') {
            vm.versionForm.versionUrl = '';
            done();
          } else {
            done();
          }
        },
      });
    },
    uploadSuccess (response, file, fileList) {
      console.log(response, file, fileList);
      this.versonForm.versionUrl = response.data;
    },
    async addVersion () {
      if (this.lock) return;
      this.lock = true;

      this.$refs['versionForm'].validate(async valid => {
        if (valid) {
          const { code, message } = await this.$API.addVersion(this.versionForm)
            .catch(() => {
              this.lock = false;
            });

          if (code === 200) {
            this.isShow = false;
            this.$message.success('新增成功!');
            this.getList();
          } else {
            this.$message.error(message);
          }
        }
        this.lock = false;
      });
    }
  }
};
</script>

<style lang="less">
.add-version {
  margin-left: -30px;
  .el-form-item {
    width: 265px;
    margin: 0 0 20px 30px;
  }
  .el-form-item__error {
    padding-top: 5px;
  }
}
</style>
